<!DOCTYPE html>
<html>
<head>
    <title>检票 - 紫荆之声</title>
    <link rel="stylesheet" href="/3rd/bs/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/css/activity_checkin.css"/>
    <meta charset="UTF-8">
</head>
<body onload="auto_adjust();" onresize="auto_adjust();">

<div id="common-header" class="full-div">
</div>

<div id="welcome-screen" class="full-div">
    <img class="center-button" onclick="enter_checkin();" id="pause-button"
         src=""/>

    <h3 id="pause-hint">↑点击图标开始检票↑</h3>
    <h4 id="pause-hint">如果没有反应，您需要先启用浏览器全屏功能:)</h4>
</div>

<div id="checkin-screen" class="full-div" style="display: none;">
    <form role="form" method="post" id="checkin-form" action="/api/a/activity/checkin">
        <div class="form-group col-xs-offset-2 col-xs-8">
            <input class="form-control input-lg" type="text" id="input-uid" name="ticket" placeholder="扫描二维码或输入学号"
                   onblur="setTimeout(function(){$('#input-uid').focus();});" autocomplete="off" required maxlength="32">
        </div>
    </form>
    <div class="col-xs-offset-2 col-xs-8" id="tickets-table-holder">
        <!--<table class="table table-hover tickets-table" id="tickets-table-header">
            <thead>
                <tr>
                    <th class="tickets-header">序号</th>
                    <th class="tickets-header"></th>
                    <th class="tickets-header">电子票号</th>
                    <th class="tickets-header">学号</th>
                    <th class="tickets-header">结果</th>
                </tr>
            </thead>
        </table>-->
        <div id="tickets-table-body-holder">
        <table class="table table-hover tickets-table" id="tickets-table-body">

            <tbody id="tickets-table-body">
                <!--<tr class="success">
                    <td>1</td>
                    <td><img class="ticket-status-img" src="/img/good.png"></td>
                    <td>pYlIOO0On7XvylZDReikGCwZGZL2a2ZE</td>
                    <td>2011013236</td>
                    <td>检票成功</td>
                </tr>
                <tr class="danger">
                    <td>1</td>
                    <td><img class="ticket-status-img" src="/img/error.png"></td>
                    <td>pYlIOO0On7XvylZDReikGCwZGZL2a2ZE</td>
                    <td>2011013236</td>
                    <td>票不存在</td>
                </tr>-->
            </tbody>
        </table>
        </div>
    </div>
</div>

<script type="text/template" id="tpl-common-header">
    <img src="/img/student_logo.png" alt="学生清华" id="logo-img"/>

    <h1 id="header-checkin">“紫荆之声”票务系统 - 检票</h1>

    {% if not activity %}
    <h2 id="header-activity">正在载入……</h2>
    {% else %}
    <h2 id="header-activity">{{ activity.name }}</h2>

    <div id="activity-time"><label id="act-time-label">活动时间：</label><span
            id="act-time-span">{{ activity.startTime|date('Y年m月d日H:i') }} 到 {{ activity.endTime|date('Y年m月d日H:i') }}</span>
    </div>
    {% endif %}
</script>

<script src="/3rd/jquery.js"></script>
<script src="/3rd/bs/js/bootstrap.min.js"></script>
<script src="/3rd/screenfull/screenfull.min.js"></script>
<script src="/3rd/swig.js"></script>
<script src="/js/base.js"></script>
<script src="/js/base_admin.js"></script>
<script src="/js/activity_checkin.js"></script>

<script>
    var locals = {};
    var renderTemplate = function (name) {
        $('#' + name).html(swig.render($('#tpl-' + name).html(), {locals: locals}));
    };
    var render = function () {
        renderTemplate('common-header');

        api.form($('#checkin-form'), function (data) {
            // success
            update_tickets_table({
                result: 'success',
                stuid: data.studentId,
                ticket: data.ticket,
                msg: 'accepted'
            });
        }, function (errno, errmsg, e) {
            // error
            update_tickets_table({
                result: 'error',
                stuid: 'Unknown',
                msg: '[' + errno + ']' + errmsg
            });
        }, function (data) {
            // before
            append_tickets_table(data.ticket);
            if (!isNaN(data.ticket)) {
                data.studentId = data.ticket;
                delete data.ticket;
            }
            data.actId = urlParam.id;
            $('#input-uid').attr('readonly', true);
        }, function () {
            // complete
            $('#input-uid').val('').attr('readonly', false).focus();
        });

    };
    $(function () {
        swig.setDefaultTZOffset(new Date().getTimezoneOffset());
        loginRequired(function () {
            api.get('/api/a/activity/detail', {id: urlParam.id}, function (data) {
                locals.activity = data;
                updateDate(data, 'startTime', 'endTime');
                render();
            }, dftFail);
        });
    });
</script>
</body>
</html>
